<template>
	<div class="headerd">
		<router-link to='/' id="logs" ><img v-if="type" src="../../assets/log.png" /></router-link>
		<p id="selectCity" class="selectCity">{{citydata.text}}<span class="selectCity_next" @click="openbag">▼</span></p>
		<router-link to='' class="topTelphone"><i class="Telphone"><img src="../../assets/home/image/home_tel.png"/></i>400-612-5329</router-link>
		<p @click="user" class="home_user">
			<img id="user" src="../../assets/home/image/home_okuser.png" />
			<img id="okuser" src="../../assets/home/image/home_user.png" />
		</p>
		<div class="searchbag" v-if="flag" @click="setMaskShow">
			<div class="cityMain">
				<div class="cityTop">
					选择地区<span>[当前：{{citydata.text}}]</span>
					<div class="iconCloseCity"><img src="../../assets/home/image/colse_03.png" @click="colse" /></div>
					<ul class="listCity">
						<li v-for="(item, index) in citydata.children">
							<router-link to=''>{{item.text}}</router-link>
						</li>

					</ul>
				</div>

			</div>
		</div>
	</div>
	</div>

</template>

<script>
	export default {
		name: 'myheader',
		data() {
			return {
				flag: false,
				citydata: {
					text: '重庆',
					children: [{
						value: "500101",
						text: "万州区"
					}, {
						value: "500102",
						text: "涪陵区"
					}, {
						value: "500103",
						text: "渝中区"
					}, {
						value: "500104",
						text: "大渡口区"
					}, {
						value: "500105",
						text: "江北区"
					}, {
						value: "500106",
						text: "沙坪坝区"
					}, {
						value: "500107",
						text: "九龙坡区"
					}, {
						value: "500108",
						text: "南岸区"
					}, {
						value: "500109",
						text: "北碚区"
					}, {
						value: "500110",
						text: "万盛区"
					}, {
						value: "500111",
						text: "双桥区"
					}, {
						value: "500112",
						text: "渝北区"
					}, {
						value: "500113",
						text: "巴南区"
					}, {
						value: "500114",
						text: "黔江区"
					}, {
						value: "500115",
						text: "长寿区"
					}, {
						value: "500222",
						text: "綦江县"
					}, {
						value: "500223",
						text: "潼南县"
					}, {
						value: "500224",
						text: "铜梁县"
					}, {
						value: "500225",
						text: "大足县"
					}, {
						value: "500226",
						text: "荣昌县"
					}, {
						value: "500227",
						text: "璧山县"
					}, {
						value: "500228",
						text: "梁平县"
					}, {
						value: "500229",
						text: "城口县"
					}, {
						value: "500230",
						text: "丰都县"
					}, {
						value: "500231",
						text: "垫江县"
					}, {
						value: "500232",
						text: "武隆县"
					}, {
						value: "500233",
						text: "忠县"
					}, {
						value: "500234",
						text: "开县"
					}, {
						value: "500235",
						text: "云阳县"
					}, {
						value: "500236",
						text: "奉节县"
					}, {
						value: "500237",
						text: "巫山县"
					}, {
						value: "500238",
						text: "巫溪县"
					}, {
						value: "500240",
						text: "石柱土家族自治县"
					}, {
						value: "500241",
						text: "秀山土家族苗族自治县"
					}, {
						value: "500242",
						text: "酉阳土家族苗族自治县"
					}, {
						value: "500243",
						text: "彭水苗族土家族自治县"
					}, {
						value: "500381",
						text: "江津区"
					}, {
						value: "500382",
						text: "合川区"
					}, {
						value: "500383",
						text: "永川区"
					}, {
						value: "500384",
						text: "南川区"
					}]
				},
			}
		},
		props: ['type', 'title'],
		mounted(){
			var userId = localStorage.getItem("userId");
			if(userId == null){
				$("#user").hide();
				$("#okuser").show();
			}else{				
				$("#user").show();
				$("#okuser").hide();
			}
		},
		methods: {
			openbag() {
				this.flag = true;
			},
			colse() {
				this.flag = false;
			},
			setMaskShow: function(event) {
				var dom = document.querySelector(".cityMain");
				if (dom) {
					if (!dom.contains(event.target)) {
						//这句是说如果我们点击到了id为child以外的区域
						this.flag = false;
					}
				}
			},
			user(){
				var userId = localStorage.getItem("userId");
				if(userId == null){
					this.$router.push('/user');
				}else{
					this.$router.push("/my")
				}
			}
		}
	}
</script>

<style scoped>
	.headerd,
	.headers {
		width: 100%;
		height: 1rem;
		display: flex;
		justify-content: space-between;
		padding: 0 0.2rem;
		box-sizing: border-box;
		align-items: center;
		position: absolute;
		z-index: 999;
	}
	
	a {
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
		-webkit-user-select: none;
		-moz-user-focus: none;
		-moz-user-select: none;
	}
	
	.searchbag {
		z-index: 999;
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0px;
		top: 0px;
		margin: 0px auto;
		overflow-y: auto;
		transform-origin: 0px 0px 0px;
		opacity: 1;
		transform: scale(1, 1);
		background: rgba(0, 0, 0, 0.6);
	}
	
	.cityMain {
		width: 6.4rem;
		background: #fff;
		-moz-border-radius: 0.13rem;
		-webkit-border-radius: 0.13rem;
		border-radius: 0.13rem;
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		padding: 0 0 0.48rem 0;
	}
	
	.cityTop {
		padding: 0.3rem 0rem 0 0.2rem;
		color: #666;
		font-size: 0.12rem;
		position: relative;
	}
	
	.cityTop span {
		color: #999;
	}
	
	.iconCloseCity {
		display: block;
		width: 0.3rem;
		height: 0.3rem;
		position: absolute;
		top: 0.35rem;
		right: 0.3rem;
	}
	
	.iconCloseCity img {
		width: 100%;
		height: 100%;
	}
	
	.listCity {
		margin: 0.3rem 0 0 0rem;
	}
	
	.listCity li {
		float: left;
		display: inline;
	}
	
	.listCity li a {
		display: block;
		width: 1.3rem;
		height: 0.8rem;
		background: #f5f5f5;
		color: #999;
		text-align: center;
		line-height: 0.8rem;
		margin: 0 0.2rem 0.1rem 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.headerd #logs>img {
		height: 0.6rem;
	}
	
	.headers>img {
		width: 0.6rem;
	}
	
	.headers>p {
		font-size: 0.5rem;
		color: white;
	}
	
	.selectCity {
		display: block;
		background: #fff;
		border-radius: 0.33333333rem;
		padding: 0 0.22rem;
		line-height: 0.48rem;
		text-align: center;
		position: absolute;
		left: 1.3rem;
		box-sizing: border-box;
		font-size: 0.12rem;
	}
	
	.topTelphone {
		width: 3rem;
		color: #dcdcdc;
		position: absolute;
		left: 3.3rem;
		font-family: Georgia;
		font-size: 0.23rem;
		text-decoration: none;
	}
	
	.selectCity_next {
		width: 0.14rem;
		height: 0.1rem;
		font-size: 0.1rem;
	}
	
	.topTelphone i.Telphone {
		width: 0.3rem;
		height: 0.3rem;
		margin-top: 0.3rem;
	}
	
	.topTelphone img {
		width: 0.3rem;
		height: 0.3rem;
	}
	
	.home_user {
		width: 0.4rem;
		height: 0.4rem;
		overflow: hidden;
	}
	
	.home_user img {
		width: 100%;
		height: 100%;
	}
</style>